/*
 * @Descripttion:
 * @version:
 * @Author: kl2018
 * @Date: 2019-11-12 15:34:19
 * @LastEditors: kl2018
 * @LastEditTime: 2020-08-10 14:03:58
 */
import React, { Component } from 'react';
import { WeaTop, WeaLocaleProvider } from 'ecCom';

import { Button } from 'antd';
import { inject, observer } from 'mobx-react';

const getLabel = WeaLocaleProvider.getLabel;

@inject('changePasswordStore')
@observer
class ChangePassword extends Component {
  componentDidMount() {
    const changePasswordStore = this.props.changePasswordStore;
    changePasswordStore.getFormItem();
  }

  render() {
    const { changePasswordStore } = this.props;
    const { range, changeVerificationCode } = changePasswordStore;
    return (
      <div className="changePassword">
        <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@lfgbi9`}
          title={<span style={{ color: '#333333' }}>{getLabel(17993, '修改密码')}</span>}
          icon={<i className="icon-coms-danweishezhi" />}
          iconBgcolor="#0079DE"
          buttons={[<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@0agtut@save`} type="primary" onClick={() => changePasswordStore.onCheck()}>{getLabel(30986, '保存')}</Button>]}
        />
        <div className="formBox">
          {changePasswordStore.form.render({ needTigger: true })}
          {/*eslint-disable */}
          <img
            src={`/weaver/weaver.file.MakeValidateCode?isView=1&validatetype=0&validatenum=4&seriesnum_=${range}`}
            onClick={() => changeVerificationCode()}
            className="verificationCode"
          />
          {/* eslint-enable */}
        </div>
      </div>
    );
  }
}
export default ChangePassword;
